<template> 
<div class="create-view">
    <div class="one">
        <MyTabsSlot
            class="tab-list"
            :activeIndex="activeIndex">
            <div
                :class="{
                    'item':true,
                    'active-item':activeIndex==index,
                }"
                v-for="(item,index) in optionList"
                :key="index"
                @click="activeIndex=index">
                {{item.title}}
            </div>
        </MyTabsSlot>
    </div>
    <div class="two">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</div>
</template>

<script>
import MyTabsSlot from '@/components/MyTabsSlot';
export default {
    name: 'Create',
    components:{MyTabsSlot},
    data(){
        this.optionList = [
            {title:'颜色',value:'/create/color'},
            {title:'渐变色',value:'/create/gradient'},
            {title:'边框阴影',value:'/create/shadow'},
        ];
        return{
            activeIndex:0,  //当前选择的索引
        };
    },
    watch:{
        $route:{
            handler(){
                let path = this.$route.path;
                if(!path) return;
                this.optionList.forEach((item,index) => {
                    if(item.value == path){
                        this.activeIndex = index;
                    }
                });
            },
            immediate:true,
        },
        activeIndex(value){
            value = this.optionList[value].value;
            this.$router.push(value);
        },
    },
}
</script>
<style lang="scss" scoped>
.create-view{
    width: var(--container-width);
    margin: 0 auto;
    padding-top: 35px;
    display: grid;
    grid-gap: 35px;
    grid-template-rows: min-content 1fr;
    grid-template-areas: "one" "two";
    grid-auto-flow:row dense;
    color: #3a3a59;
    font-size: 1.5rem;
    .one{
        height: fit-content;
        grid-area: one;
        .tab-list{
            width: fit-content;
            border: 1px solid var(--border-color);
            background-color: transparent;
            margin: 15px auto;
            >.item{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 7px 5px;
                cursor: pointer;
                font-size: 17px;
                color: #7e7e7e;
            }
            >.active-item{
                color: #1e80ff;
                font-weight: bold;
            }
        }
    }
    .two{
        height:fit-content;
        grid-area: two;
        position: relative;
        display: flex;
        justify-content: center;
    }
}
</style>

